<template>
  <el-table :data="userData" style="width: 100%">
    <el-table-column prop="id" label="ID" width="80"></el-table-column>
    <el-table-column prop="username" label="用户名"></el-table-column>
    <el-table-column prop="password" label="密码"></el-table-column>
    <el-table-column label="角色">
      <template slot-scope="scope">
          <span>{{ handleRole(scope.row.rolename) }}</span>
      </template>
    </el-table-column>
    <el-table-column prop="createTime" label="创建日期"></el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button
          type="primary"
          icon="el-icon-edit"
          circle
          @click="handleEdit(scope.$index, scope.row)"
          style="margin-right: 10px;"
        ></el-button>
        <el-popconfirm
          confirm-button-text="确定"
          cancel-button-text="取消"
          icon="el-icon-error"
          icon-color="red"
          title="确定删除该用户信息吗？"
          @confirm="handleDelete(scope.$index, scope.row)">
          <el-button
            slot="reference"
            type="danger"
            circle
            icon="el-icon-delete">
          </el-button>
        </el-popconfirm>
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  name: "UserTable",
  props: ["userData", "handleEdit", "handleDelete", "handleRole"],
}
</script>